<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 0 auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		
		<script type="text/javascript">
			class Ball {
				constructor(props) {
					this.x = 0;
					this.y = 0;
					this.r = 25;
					this.scaleX = 1;
					this.scaleY = 1;
					this.fillStyle = 'rgba(65,168,99,1)';
					this.strokeStyle = 'rgba(0,0,0,0)';
					Object.assign(this,props)
					return this
				}
				render(ctx){
					var {x,y,r,fillStyle,strokeStyle,scaleX,scaleY} = this
					// 保存绘图环境
					ctx.save()
					// 将画布坐标移动到x，y
					ctx.translate(x,y)
					ctx.scale(scaleX,scaleY) 
					ctx.fillStyle = fillStyle;
					ctx.strokeStyle = strokeStyle;
					ctx.beginPath()
					ctx.arc(0,0,r,0,2*Math.PI,false)
					ctx.fill()
					ctx.stroke()
					// 恢复绘图环境
					ctx.restore()
					return this
				}
			}
		</script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			var w = canvas.width = 500;
			var h = canvas.height = 300
			
			var angle = 30 * Math.PI / 180; // 弧度
			var speed = 2; // 速度
			var ball = null; // 小球
			(function move(){
				window.requestAnimationFrame(move)
				ctx.clearRect(0,0,w,h)
				// 绘制坐标系
				drawSystem()
				// 绘制角度线条
				drawLine()
				// 绘制小球,按角度移动
				drawBall()
				
			})()
			
			function drawBall(){
				if(!ball){
					ball = new Ball({x:w/2,y:h/2,r:10}).render(ctx);
				}
				var x = Math.cos(angle)*speed;
				var y = Math.sin(angle)*speed;
				ball.x+=x;
				ball.y+=y;
				ball.render(ctx)
			}
			// 绘制angle角度的线条
			function drawLine(){
				ctx.save()
				ctx.translate(w/2,h/2);
				ctx.rotate(angle);
				ctx.beginPath()
				ctx.moveTo(0,0)
				ctx.lineTo(w/2,0)
				ctx.stroke()
				ctx.closePath()
				ctx.restore()
			}
			// 绘制坐标系
			function drawSystem(){
				ctx.save()
					ctx.beginPath()
					ctx.lineWidth = 1.5
					ctx.strokeStyle='red'
					ctx.moveTo(0,h/2)
					ctx.lineTo(w,h/2)
					ctx.moveTo(w/2,0)
					ctx.lineTo(w/2,h)
					ctx.stroke()
				ctx.restore()
			}
		</script>
	</body>
</html>
